<template>

  <div class="header-swiper">

    <swiper ref="mySwiper" :options="swiperOption">
      <swiper-slide v-for='item in imgList' :key = "item.id"><img :src="item.url" alt=""></swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  props:['imgList'],
  data() {
    return {
        
      swiperOption: {
        pagination: {
            el:'.swiper-pagination',
            Clickable: true,
        },
        loop:true
      },
    };
  },
};
</script>
<style scoped>
.header-swiper {
  background-color: #ccc;
  height: 0;
  padding-bottom: 26.67%;
  width: 100%;
  
}
.header-swiper img {
  height: 100%;
  width: 100%;
  border-radius:.1rem;
}
</style>